<template>
	<view>
		<view class="Modal_mask" @click.stop="closes"></view>
		<view class="Modal_Modal">
			<view class="Modal_title">
				<text class="title">{{way}} USDT</text>
				<image @click.stop="closes" src="../../static/contract/close.png" mode=""></image>
			</view>
			<view class="price">单价￥7.075</view>
			<view class="select">
				<view @click="inde=0" class="one" :class="inde==0?'active':''">
					按价格{{way}}
				</view>
				<view @click="inde=1" class="one" :class="inde==1?'active':''">
					按数量{{way}}
				</view>
			</view>
			<view class="t_input" v-if="inde==0">
				<input placeholder-class="pla" type="text" value="" placeholder="请输入交易金额"/>
				<text>CNY</text>
			</view>
			<view class="t_input" v-if="inde==1">
				<input placeholder-class="pla" type="text" value="" placeholder="请输入数量"/>
				<text>USDT</text>
			</view>
			<view class="a_block">
				<view class="left">
					<text class="one">限额1000.00-5000.00 CNY</text>
					<text class="two">交易数量</text>
					<text class="three">14.12345678 USDT</text>
					<view class="cancel_btn">
						29s后自动取消
					</view>
				</view>
				<view class="right">
					<text class="one all">全部{{way}}</text>
					<text class="two">交易总额</text>
					<text class="three">￥100</text>
					<view class="confirm_btn" @click="confirm">
						下单
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icon/uni-icon.vue';
export default {
	name: 'trade-modal',
	components: { uniIcons },
	props: {
		way: {
			type: String
		},
		allPrice: {
			type: Number
		},
	},
	data() {
		return {
			inde:0,
		};
	},
	methods: {
		hideModal() {
			if (this.isMask) {
				this.$emit('close');
			}
		},
		closes() {
			this.$emit('close');
		},
		confirm() {
			this.$emit('confirm');
		}
	}
};
</script>

<style lang="scss">
.Modal_mask {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9993;
}
.Modal_Modal {
	position: fixed;
	z-index: 9999;
	bottom: 0;
	width: 100%;
	background: #fff;
	box-shadow: 0px 0px 2rpx 0px rgba(0, 0, 0, 0.54);
	.Modal_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 44rpx;
		margin-top: 26rpx;
		margin-bottom: 10rpx;
		.title {
			font-size: 36rpx;
			font-weight: bold;
		}
		image {
			width: 26rpx;
			height: 26rpx;
		}
	}
	.price {
		font-size: 24rpx;
		color: #C5CFD5;
		margin-left: 44rpx;
	}
	.select {
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-bottom: 1px solid #F8F9FB;
		margin-top: 44rpx;
		.one {
			padding-bottom: 12rpx;
			font-weight: bold;
			&.active {
				color: #488fd3;
				position: relative;
				display: flex;
				justify-content: center;
				&:after {
					content: '';
					position: absolute;
					bottom: 0;
					background: #488fd3;
					height: 2rpx;
					width: 100%;
					border-radius: 2rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
	.t_input {
		margin: 0 26rpx;
		height: 50rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background:#F8F9FB;
		border-radius:6rpx;
		margin-top: 22rpx;
		input,text {
			font-weight: normal;
		}
	}
	.a_block {
		display: flex;
		justify-content: space-between;
		padding:16rpx 26rpx 54rpx;
		.left,.right {
			text {
				color: #C5CFD5;
				font-size: 24rpx;
				display: block;
				margin-bottom: 26rpx;
			}
			.all {
				color: $blue;
			}
			.two {
				margin-bottom: 16rpx;
			}
			.three {
				margin-bottom: 38rpx;
				color: #1F3F59;
			}
		}
		.right {
			text {
				text-align: right;
			}
		}
		.blue {
			color: $blue;
		}
		.cancel_btn {
			width:210rpx;
			height:66rpx;
			background:#F8F9FB;
			border-radius:6rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.confirm_btn {
			width:210rpx;
			height:66rpx;
			background:$blue;
			border-radius:6rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
		}
	}
}
</style>
